<template>
  <div class="wrap">
    <div class="imgbox">
      <!-- <img src="../assets/images/banner.png" alt=""> -->
    </div>
    <div :class="['list-wrap', isIos ? 'iosListHeader' : 'androidHeader']">
      <van-notice-bar
        left-icon="volume-o"
        class="tips"
        speed="80"
        color="#1989fa"
        background="#ecf9ff"
        text="11月底前，涉及系统网络安全类日常需求，统一与汪宇辰联系！"
      />

      <div
        class="list-view van-hairline--top van-hairline--bottom"
        v-if="Authority == 'admin'"
      >
        <div
          class="list-item van-hairline--bottom"
          @click="link(10, '紧急变更')"
          v-if="fjjbg"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/紧急变更.png" alt />
          </div>
          <span>非集中变更</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(2, '紧急变更')"
          v-if="jjbg"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/紧急变更.png" alt />
          </div>
          <span>紧急变更</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(7, '紧急变更未审批列表')"
          v-if="show"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/紧急变更未审批.png" alt />
          </div>
          <span>紧急变更未审批列表</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>

        <div class="list-item van-hairline--bottom" @click="link(0, '令牌')">
          <div class="left-icon">
            <img src="../assets/images/掌上运维/堡垒机令牌.png" alt />
          </div>
          <span>堡垒机令牌及VPN</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(13, '集中变更验证反馈')"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/紧急变更.png" alt />
          </div>
          <span>集中变更验证反馈</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(1, '标准化清单')"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/IT系统.png" alt />
          </div>
          <span>全视图联合告警系统</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(3, '项目进度')"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/重点项目及需求.png" alt />
          </div>
          <span>重点项目及需求进度</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <!-- <div class="list-item van-hairline--bottom" @click="link(5, '外包人员外出登记')">
          <div class="left-icon">
            <img src="../assets/images/掌上运维/外包人员请假及外出.png" alt />
          </div>
          <span>外包人员外出登记</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div> -->
        <div
          class="list-item van-hairline--bottom"
          @click="link(8, '数据安全管控')"
        >
          <div class="left-icon">
            <img src="../assets/images/lp/gaojin.png" alt />
          </div>
          <span>运维安全管控</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div class="list-item van-hairline--bottom" @click="link(9, '云平台')">
          <div class="left-icon">
            <img src="../assets/images/lp/y.png" alt />
          </div>
          <span>云桌面平台</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(4, '高频变更')"
          v-if="manage"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/line_table.png" alt />
          </div>
          <span>端末设备管理</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(11, '江苏银行线路一览表')"
          v-if="net"
        >
          <div class="left-icon">
            <img src="../assets/images/lp/s.png" alt />
          </div>
          <span>线路状态一览表</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div class="list-item van-hairline--bottom" @click="link(12, '红黑榜')">
          <div class="left-icon">
            <img src="../assets/images/lp/s.png" alt />
          </div>
          <span>故障库</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div class="list-item van-hairline--bottom" @click="link(14, '安全库')">
          <div class="left-icon">
            <img src="../assets/images/lp/s.png" alt />
          </div>
          <span>安全库</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
      </div>

      <div
        class="list-view van-hairline--top van-hairline--bottom"
        v-if="Authority == 'Branch'"
      >
        <div class="list-item van-hairline--bottom" @click="link(0, '令牌')">
          <div class="left-icon">
            <img src="../assets/images/掌上运维/堡垒机令牌.png" alt />
          </div>
          <span>堡垒机令牌及VPN</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(1, '标准化清单')"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/IT系统.png" alt />
          </div>
          <span>全视图联合告警系统</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
        <div
          class="list-item van-hairline--bottom"
          @click="link(4, '高频变更')"
        >
          <div class="left-icon">
            <img src="../assets/images/掌上运维/line_table.png" alt />
          </div>
          <span>端末设备管理</span>
          <img src="../assets/images/jiantou@3x.png" alt />
        </div>
      </div>
    </div>
    <!-- </van-list> -->
    <div v-if="showLoading" class="loadWrap">
      <van-loading color="white" type="spinner" />
    </div>
  </div>
</template>

<script>
// import addButton from '../components/add-button'
import iPhoneXBottomSetAside from "../mixins/iphoneXBottomAside.js";
// import { mapState, mapMutations, mapActions } from 'vuex'
// 接口
import {
  getUserRole,
  IsBranch,
  CheckUserDept,
  UcCheckIfClost,
  FcCheckIfClost
} from "@/core/api/index";
import GLOBAL from "@/components/global_variable";
import Vue from "vue";
import { NoticeBar, Cell } from "vant";

Vue.use(NoticeBar);
export default {
  data() {
    return {
      show: false, // 是否显示紧急变更未审批模块
      manage: true, //是否显示设备管理模块
      jjbg: true, //紧急变更是否显示
      fjjbg: true, //非急变更是否显示
      net: false,
      sheetshow: false,
      showLoading: false,
      loading: false,
      finished: false,
      isIos: false,
      Authority: "" //权限分配
    };
  },
  created() {
    this.$store.commit("setTabMark", 0);
    this.$store.commit("setsafetabMark", 0);
    //minxing接口的方法
    document.addEventListener("deviceready", onDeviceReady, false); // 等待cordova加载
    let that = this;
    function onDeviceReady() {
      MXCommon.getCurrentUser(function(result) {
        GLOBAL.userId = result.login_name;
        GLOBAL.userName = result.name;
        // setTimeout(() => {
        that.getAuthority();
        that.getNet();
        that.getJjbg();
        that.get();
        // }, 10);
      });
    }
  },
  mixins: [iPhoneXBottomSetAside],
  methods: {
    get() {
      if (GLOBAL.userId == "01010305") {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    getJjbg() {
      const note = {
        userId: GLOBAL.userId
      };
      UcCheckIfClost({ note }).then(res => {
        if (res.data.code == 1) {
          this.jjbg = true;
        } else {
          this.jjbg = false;
        }
      });
      FcCheckIfClost({ note }).then(res => {
        if (res.data.code == 1) {
          this.fjjbg = true;
        } else {
          this.fjjbg = false;
        }
      });
    },
    getNet() {
      const note = {
        userId: GLOBAL.userId
      };
      CheckUserDept({
        note
      }).then(res => {
        if (res.data.code == 0) {
          //网络团队可以看到重要外联线路状态一览表
          this.net = true;
        } else {
          this.net = false;
        }
      });
    },
    getAuthority() {
      const note = {
        user_id: GLOBAL.userId
        // user_id:'10010176',   //分行的人
        // user_id:'01010359',  //总行特殊人群
        //  user_id:'01010245',   //总行的人
      };
      IsBranch({
        note
      }).then(res => {
        console.log(res)
        if (res.data.code == 1) {
          //分行人员
          this.Authority = "Branch"; //分行
          this.manage = true; //可以看到设备管理
        } else if (res.data.code == 0) {
          //总行普通人员
          this.Authority = "admin"; //总行
          this.manage = false; //不可以看到设备管理
        } else if (res.data.code == 2) {
          //总行特殊人员
          this.Authority = "admin"; //总行
          this.manage = true; //可以看到设备管理
        }
      });
    },
    link(type, title) {
      switch (type) {
        // 令牌申请
        case 0:
          this.$router.push({ name: "token" });
          break;
        // 标准化清单
        case 1:
          this.$router.push({ name: "standardlist" });
          break;
        // 紧急变更
        case 2:
          this.$router.push({ name: "change" });
          break;
        // 项目进度
        case 3:
          this.$router.push({ name: "projectshedule" });
          break;
        // 高频变更
        case 4:
          // this.$router.push({ name: "jjbgApproval" })
          this.$router.push({ name: "manage" });
          break;
        // 外包人员及请假登记
        case 5:
          this.$router.push({ name: "GoRegister" });
          break;
        //联合告警
        case 6:
          this.$router.push({ name: "JointAlarm" });
          break;
        // 紧急变更未审批列表
        case 7:
          this.$router.push({ name: "NoApprovalHistory" });
          break;
        // 数据安全管控
        case 8:
          this.$router.push({ name: "datas" });
          break;
        // 云平台
        case 9:
          this.$router.push({ name: "Cloud" });
          break;
        // 非集中变更
        case 10:
          this.$router.push({ name: "NoChange" });
          break;
        // 江苏银行线路一览表
        case 11:
          this.$router.push({ name: "CoreChart" }); //   listView
          break;
        //  红黑榜
        case 12:
          this.$router.push({ name: "redBlack" });
          break;
        // 集中变更验证反馈
        case 13:
          this.$router.push({ name: "TextFeedback" });
          break;
        // 安全库
        case 14:
          this.$router.push({ name: "safeRoom" });
          break;
      }
    },
    onLoad() {
      this.showLoading = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.imgbox {
  width: 100%;
  height: 300px;
  background: url("../assets/images/banner.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 0.4rem;
}
.tips {
  margin: 0 0.3rem 0.3rem;
}
.list-wrap {
  .list-view {
    /*background-color: #fff;*/
    padding: 0 0.3rem;
    .list-item {
      height: 1.4rem;
      font-size: 0;
      position: relative;
      background: #fff;
      margin-bottom: 0.3rem;
      border-radius: 0.266667rem;
      .left-icon {
        display: inline-block;
        vertical-align: middle;
        width: 0.666667rem;
        height: 0.666667rem;
        margin-left: 0.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      > span {
        margin-left: 0.24rem;
        line-height: 1.4rem;
        display: inline-block;
        margin-top: 0;
        vertical-align: middle;
        font-size: 28px;
        color: rgb(51, 51, 51);
      }
      > img {
        width: 25px;
        height: 25px;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
.loadWrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 10px;
}
.van-hairline--top::after,
.van-hairline--bottom::after {
  border-bottom-width: 0px;
  border-top-width: 0px;
}
</style>
